<template>
	<view class="register">
		<view class="register-logo">
			<image class="register-logo-img" src="../../static/img/logo.png" mode=""></image>
		</view>
		<view class="register-input">
			<y-input
				size="small"
				 v-model="userName"
				 type="text"
				 placeholder="请输入用户名"/>
			<y-input 
				size="small"
				v-model="passWord"
				type="password"
				isShowPass
				placeholder="请输入密码"/>
				<y-input
					size="small"
					v-model="rpassWord"
					type="password"
					isShowPass
					placeholder="确认密码"/>
			<y-button
				 class="wbutton"
				 text="注 册"
				 :rotate="isRotate"
				 bgColor="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
				 @click="startregister"
			 />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName:'',
				passWord:'',
				rpassWord:'',
				isRotate: false,
				checkValue:true
			};
		},
		methods:{
			startregister(){
				if (this.userName.length == "") {
					 uni.showToast({
							icon: 'none',
							mask:true,
							position: 'top',
							title: '用户名不能为空'
					});
					return;
				}
				if (this.passWord.length == "") {
					uni.showToast({
						icon: 'none',
						mask:true,
						position: 'top',
						title: '密码不能为空'
					});
					return;
				}
				if (this.rpassWord.length == "") {
					uni.showToast({
						icon: 'none',
						mask:true,
						position: 'top',
						title: '请再次输入密码'
					});
					return;
				}
				if(this.passWord !== this.rpassWord){
					uni.showToast({
						icon: 'none',
						mask:true,
						position: 'top',
						title: '两次密码输入不一致'
					});
					return;
				}
				if(this.isRotate){
					uni.showToast({
						icon: 'none',
						mask:true,
						position: 'top',
						title: '不要重复点击'
					});
					return
				}
				this.isRotate = true
				let obj = {
					userName:this.userName,
					passWord:this.passWord
				}
				this.$api.Register(obj).then(res => {
					if(res.code == 200){
						uni.showToast({
							icon: 'none',
							mask:true,
							position: 'top',
							duration:1500,
							title: '注册成功请登录'
						});
						setTimeout(() => {
							uni.navigateTo({
								url:'/pages/login/index'
							})
						},1000)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.register{
	padding:20rpx 100rpx;
	&-logo{
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		&-img{
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
		}
	}
	&-check{
		margin-bottom: 20rpx;
	}
	&-line{
		display: flex;
		justify-content:center;
		align-items: center;
		margin-top: 60rpx;
		font-size: 24rpx;
		&_line{
			width: 20%;
			height: 2rpx;
			background-color: #AAAAAA;
		}
		&_text{
			margin: 0 20rpx;
			color: #AAAAAA;
		}
	}
	&-other{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;
		&-img{
			width: 80rpx;
			height: 80rpx;
		}
	}
	&-change{
		text-align: center;
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #AAAAAA;
	}
}
</style>
